<template>
  <div id="detail_goods" v-if="Object.keys(goods).length!==0">
    <div class="title">{{ goods.title }}</div>
    <div class="info">
      <span class="n_price">{{ goods.newPrice }}</span>
      <span class="o_price">{{ goods.oldPrice }}</span>
      <span v-if="goods.discount">{{ goods.discount }}</span>
    </div>
    <div class="columns">
      <span>{{ goods.columns[0] }}</span>
      <span>{{ goods.columns[1] }}</span>
      <span>{{ goods.services[goods.services.length - 1].name }}</span>
    </div>
    <div class="services">
      <span class="info-service-item" v-for="index of goods.services.length-1">
        <img :src="goods.services[index-1].icon" alt="">
        <span>{{ goods.services[index - 1].name }}</span>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailGoodsInfo",
  props: {
    goods: {
      type: Object,
      default() {
        return {};
      }
    }
  }
}
</script>

<style scoped>
#detail_goods {
  padding: 0.42rem;
}
.title {
  font-size: 0.768rem;
}

.info {
  margin: 0.42rem 0;
}
.n_price {
  font-size: 0.85rem;
  color: var(--color-high-text);
}
.o_price {
  margin: 0 0.21rem;
  font-size: 0.512rem;
  color: gray;
}
.discount {
  color: white;
  font-size: 0.6rem;
  padding: 0.128rem;
  border-radius: 0.21rem;
  position: relative;
  top: -0.21rem;
}

.columns {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.42rem;
  border-bottom: 0.042rem solid rgba(128, 128, 128, 0.3);
  /* 孩子span继承下面2个样式 */
  font-size: 0.6rem;
  color: gray;
}

.services {
  display: flex;
  font-size: 0.6rem;
  justify-content: space-between;
  padding: 0.85rem 0;
  border-bottom: 0.128rem solid rgba(128, 128, 128, 0.2);
}
.services img {
  width: 0.512rem;
}
</style>
